import React, { memo, useCallback } from "react";
import { RoomsWrapper } from "@/views/entire/c-cpns/entire-rooms/style";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import RoomItem from "@/components/room-item";
import { useNavigate } from "react-router-dom";
import { changeDetailInfoAction } from "@/store/modules/detail";

const EntireRooms = memo((props) => {
  const {roomList, isLoading} = useSelector((state) => {
    return {
      roomList: state.entire.roomList,
      totalCount: state.entire.totalCount,
      isLoading: state.entire.isLoading,
    };
  }, shallowEqual);

  const navigate = useNavigate();
  const dispatch = useDispatch();
  const itemClickHandle = useCallback((data) => {
    dispatch(changeDetailInfoAction(data));
    navigate('/detail')
  }, [navigate, dispatch]);
  return (
    <RoomsWrapper>
      <div className="list">
        {
          roomList?.map((item) => {
            return (
              <RoomItem itemData={ item } itemWidth="20%" key={ item.id }
                        itemClick={ itemClickHandle }></RoomItem>
            )
          }) }
      </div>
      {
        isLoading && <div className="cover"></div>
      }

    </RoomsWrapper>
  );
});

export default EntireRooms;
